<template>
    <!-- <div class="left">
        <img src="@/assets/images/图片@1x.png" alt="" class="headPic">
        <p class="nickname">小租配齐官方</p>
        <p class="content">在</p>
    </div> -->

    <div :class="direction">
        <!-- 头像区 -->
        <img :src="headPicSrc" alt="" class="headPic">
        <!-- 文本区 -->
        <div class="text">
            <p class="nickname">{{nameForshow}}</p>
            <p class="content">{{content}}</p>
        </div>
    </div>
    <div style="clear: both"></div>
    
</template>
    
<script setup >
    import {defineProps} from 'vue'
    import {ref,computed} from 'vue'
    import store from '@/store'

    let props = defineProps({
        headPicSrc:String,
        nickname:String,
        flow:{
            type:String,
            default:'in'
        },
        content:{
            type:String,
            default:'这是一个默认值'
        }
    })

    let direction = ref(props.flow == "in"?'left':'right');
    let selfName = computed(()=>{
        return store.state.user.userData.nickname;
    })

    let nameForshow = computed(()=>{
        if (props.flow == 'in'){
            return props.nickname;
        }
        else return selfName.value;
    })
    
</script>
    
<style lang="scss" scoped>
    .right{
        float:right;
        clear: both;
        margin-right: 0.28rem;
        max-width: 2.75rem;
        min-height: 0.64rem;
        
        position: relative;
        
        img.headPic{
            float: right;
            width: 0.54rem;
            height: 0.54rem;
            margin-left: 0.09rem;
        }

        .text{
            display: flex;
            flex-direction: column;

            .nickname{
                text-align: right;
                height: 0.2rem;
                
                font-size: 0.12rem;
            }

            .content{
                box-sizing: border-box;
                min-height: 0.37rem;
                padding:0.09rem 0.09rem 0.09rem ;
                background-color: #8BCE1F;
                color: white;
                border-radius: 0.08rem;
                
                font-size: 0.16rem;
                line-height: 0.2rem;

            }
        }
    }

    .left{
        max-width: 2.75rem;
        min-height: 0.64rem;
        display: flex;
        margin-left: 0.28rem;
        position: relative;
        
        img.headPic{
    
            width: 0.54rem;
            height: 0.54rem;
            margin-right: 0.09rem;
        }

        .text{
            display: flex;
            flex-direction: column;
            

            .nickname{
                height: 0.2rem;
                font-size: 0.12rem;
            }

            .content{
                box-sizing: border-box;
                min-height: 0.37rem;
                padding:0.09rem 0.09rem 0 0.09rem ;
                background: #ffffff;
                border-radius: 0.08rem;
                font-size: 0.18rem;
                line-height: 0.2rem;

            }
        }
    }


</style>